<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<button>发起ajax请求</button>
	<div id="app"></div>
</body>
<script>
	// 请求分为两种
	// 1- 一般请求:比如1->输入网址按下回车  比如2-提交表单  比如3-script link img 比如4-刷新
	//           特点:由浏览器发起请求,将响应体中的数据进行渲染.
	// 2- ajax请求: 2-1- xhr   2-2- fetch
	//           特点:可以由程序员控制在什么时候发起请求(并可以设置请求报文信息),可以由程序员控制如何处理响应报文件信息.
	//           特点:存在跨域问题(必须要保证请求地址与当前页面是同一个服务,否则会产生跨域)
	//               同源策略(同协议,同端口号,同域名,三者如果有一个不满足即产生跨域)
	//   前端需要知道:
	//       1- 如何设置请求方式
	//       2- 如何设置请求地址
	//       3- 如何设置请求头
	//       4- 如何设置请求体
	//       5- 如何获取响应头
	//       6- 如何获取响应体
	//       7- 如何获取响应状态码
	//       8- 如何获取响应状态码说明
	//   后端需要知道:
	//       1- 如何获取请求头
	//       2- 如何获取请求方式
	//       3- 如何获取请求地址
	//       4- 如何获取请求体
	//       5- 如何设置响应体
	//       6- 如何设置响应头
	//       7- 如何设置状态码
	//       8- 如何设置状态说明
	
	document.querySelector("button").onclick = function(){
		// 1- 创建xhr实例
		// XMLHttpRequest:通过HTTP协议发送请求,并操作数据
		// XML:数据(不局限于XML)
		// Http:协议
		// Request:请求
		const xhr = new XMLHttpRequest();
		// 2- 准备(请求方式,请求地址)
		// 第一个参数是请求方式,第二个参数是请求地址
		xhr.open("post","/info");
		// 在调用open与send函数之间,可以通过setRequestHeader设置请求头
		xhr.setRequestHeader("age",100);
		xhr.setRequestHeader("userName","lisi");
		// 3- 发送
		// send接收的参数即是请求体的内容.参数的格式只允许是字符串
		// 请求体的数据格式一般需要进行设置,常见的有二种.
		// 3-1- application/x-www-form-urlencoded
		// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
		// xhr.send("a=1&b=2&c[0]=3&c[1]=4");
		
		// 3-2- application/json
		xhr.setRequestHeader("Content-Type","application/json")
		xhr.send(JSON.stringify({a:1,b:2,c:3,d:4}));
		
		// 4- 获取响应体数据
		xhr.onload = function(){
			// 当获取到响应体数据后执行该函数
			console.log("响应体",xhr.response);
			console.log("响应头",xhr.getAllResponseHeaders());
			console.log("获取content-type响应头",xhr.getResponseHeader("content-type"));
			console.log("状态码",xhr.status);
			console.log("状态码说明",xhr.statusText);
			document.querySelector("#app").innerHTML = xhr.response;
		}
		
	}
</script>
</html>